<template>
    <div class="order">
        <li>订单管理</li>
        <el-card class="box-card">
            <div class="search">
                <div class="orderType">
                        <span>订单类型:</span>
                        <el-select v-model="value" clearable placeholder="请选择" @change="orderChange" >
                            <el-option label="二手房出租" value="二手房出租"></el-option>
                            <el-option label="有房出租" value="有房出租"></el-option>
                            <el-option label="我想买个房" value="我想买个房"></el-option>
                            <el-option label="我想租个房" value="我想租个房"></el-option>
                        </el-select>
                </div>
                <div class="orderSearch">
                    <span>搜索:</span>
                    <el-input placeholder="请输入内容" v-model="ipt"></el-input>
                    <el-button type="primary" @click="searchOrder" >搜索</el-button>
                </div>
            </div>
            <el-table
                :data="orderList"
                stripe
                border >
                <el-table-column type="index" label="序号" width="80" ></el-table-column>
                <el-table-column label="编号" prop="number" ></el-table-column>
                <el-table-column label="用户名" prop="name" ></el-table-column>
                <el-table-column label="手机号" prop="phone" ></el-table-column>
                <el-table-column label="类型" prop="type" ></el-table-column>
                <el-table-column label="支付金额" prop="price" ></el-table-column>
                <el-table-column label="支付时间" prop="payTime" ></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="deleteOrder(scope.row)" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageIndex"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      ipt: '',
      orderList: [],
      page: {
        pageIndex: 1,
        pageSize: 5
      },
      total: 0
    }
  },
  created () {
    this.getOrderList()
  },
  methods: {
    getOrderList () { // 获取数据
      this.$api.getOrder(this.page).then(res => {
        if (res.data.code === 1) {
          this.orderList = res.data.data
          this.total = res.data.total
          this.$message.success('获取成功')
        }
      })
    },
    handleSizeChange (val) { // 分页
      this.page.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange (val) {
      this.page.pageIndex = val
      this.getOrderList()
    },
    deleteOrder (row) { // 删除
      this.$api.orderDelete({ id: row.id }).then(res => {
        if (res.data.code === 1) {
          this.$message.success('删除成功')
          this.getOrderList()
        }
      })
    },
    orderChange () {
      this.$api.orderFilter({ value: this.value }).then(res => {
        if (res.data.code === 1) {
          this.orderList = res.data.data
        }
      })
    },
    searchOrder () {
      this.$api.orderSearch({ value: this.ipt }).then(res => {
        if (res.data.code === 1) {
          this.orderList = res.data.data
        }
      })
    }
  }
}
</script>

<style scoped>
.order{
    width: 100%;
    height: 100%;
}
.box-card{
    margin-top: 10px;
}
.search{
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.orderSearch{
    display: flex;
    align-items: center;
    margin-left: 20px;
}
.orderSearch span{
    width: 60px;
}
</style>
